<template>
  <n-config-provider :theme="theme">
    <n-layout  embedded position="absolute">
      <n-layout-header bordered style="height: 64px; padding: 24px;">
        <n-grid :x-gap="10" :cols="12">
          <n-grid-item :span="2">
            <n-page-header>
              <template #title>
                <a
                  href="/"
                  style="text-decoration: none; color: inherit; font-weight:bold; font-size:24px;"
                >lawted的blog</a>
              </template>
            </n-page-header>
          </n-grid-item>
          <n-grid-item :span="9">
            <n-menu @update:value="handleUpdateValue" mode="horizontal" :options="menuOptions" />
          </n-grid-item>
          <n-grid-item :span="1">
            <n-switch
              v-model:value="themeTrigger"
              @update:value="themeTrigger == true ? theme = darkTheme : theme = null"
            >
              <template #checked>light</template>
              <template #unchecked>dark</template>
            </n-switch>
          </n-grid-item>
        </n-grid>
      </n-layout-header>
      <router-view></router-view>
      <n-layout-footer bordered position="absolute"  style="height: 64px; padding: 24px; bottom: 0px;">
        Cpoyright @Lawted
        <a href="https://beian.miit.gov.cn/" target="_blank" style="color: grey">京ICP备2021028594号</a>
      </n-layout-footer>
    </n-layout>
    <n-global-style />
  </n-config-provider>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// darkmode
import { darkTheme } from 'naive-ui'
import { BuiltInGlobalTheme } from 'naive-ui/lib/themes/interface';
const theme = ref<null | BuiltInGlobalTheme>(null)
const themeTrigger = ref(false)

// router
import { useRouter } from 'vue-router'
const menuOptions = [
  {
    label: '主页',
    key: 'home'
  },
  {
    label: '技术',
    key: '/tech'
  },
  {
    label: '杂碎',
    key: '/talk'
  },
]
const router = useRouter()
const handleUpdateValue = (key: string) => {
  console.log(key)
  router.replace({
    path: key
  })
}
</script>

<style scoped>
.n-gradient-text {
  font-weight: bolder;
}
.n-layout-header {
  padding: 12px;
}
</style>
